<template>
	<uni-popup
		borderRadius="24rpx 24rpx 0 0"
		ref="popup"
		background-color="#fff"
		@change="popupChg"
	>
		<view class="popup">
			<view class="popup-header flex items-center justify-between">
				<view class="">
					选择类型
				</view>
				<view
					class="confirm"
					@click="pickerConfirm"
				>
					确定
				</view>
			</view>
			<view class="popup-content">
				<picker-view
					class="picker"
					indicator-style="height:88rpx;font-size: 36rpx;color: #0F0F0F;"
					:value="pickerValue"
					@change="pickerChg"
				>
					<picker-view-column class="picker-column">
						<view
							v-for="(item,index) in options"
							class="flex-row-center"
						>{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "ym-picker",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			options: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				pickerData: [0],
				pickerValue: [0],
			};
		},
		watch: {
			visible: function(val) {
				if (val) {
					this.$refs.popup.open('bottom')
				} else {
					this.$refs.popup.close()
				}
			},
		},
		methods: {
			popupChg(e) {
				this.$emit('update:visible', e.show)
			},
			pickerChg(e) {
				const {
					detail: {
						value
					}
				} = e
				this.pickerData = value
			},
			pickerConfirm() {
				this.pickerValue = this.pickerData
				const item = this.options.find((_, index) => index === this.pickerData[0])
				this.$emit("change", item)
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		&-header {
			padding: 24rpx 24rpx 16rpx;
			box-sizing: border-box;
			font-size: 36rpx;
			color: #0F0F0F;

			.confirm {
				color: #1F245B;
			}
		}

		&-content {
			height: 532rpx;

			.picker {
				height: 100%;

				&-column {}

			}
		}
	}
</style>